<template>
	<view class="wrap">
		<view class="list-item" v-for="item in detailList" :key="item.id">
			<view class="u-flex u-row-between u-border-bottom u-p-b-30">
				<view v-if="item.feedbackStatus != -1">
					<text class="feed-time-title">反馈时间</text>
					<text class="feed-time">{{item.feedbackTimeStr}}</text>
				</view>
				<view v-else>
					<text class="feed-time-title">反馈截止时间</text>
					<text class="feed-time">{{item.feedbackEndTimeStr}}</text>
				</view>

				<view v-if="item.feedbackStatus != -1">
					<u-button type="primary" size="mini" plain shape="cricle"
						@click="item.isOpen = !item.isOpen">{{ item.isOpen ?'收起':'展开'}}</u-button>
				</view>
			</view>
			
			<view class="u-flex u-row-center u-m-t-26" v-if="item.feedbackStatus == -1">
				<u-tag text="未反馈" type="info" border-color="#f4f4f5" />
			</view>
			
			<template v-else>
				<view class="open" v-show="item.isOpen">
					<view class="item-info">
						<view class="u-m-b-20">最新进展情况：</view>
						<view class="u-m-l-20 tips-color">{{item.feedbackContent?item.feedbackContent: '无'}}</view>
					</view>
					<view class="item-info">
						<view class="u-m-b-20">存在问题：</view>
						<view class="u-m-l-20">{{item.feedbackAdvice?item.feedbackAdvice: '无'}}</view>
					</view>
					<view class="item-info">
						<view class="u-m-b-20">拟采取的工作举措：</view>
						<view class="u-m-l-20">{{item.feedbackMeasure?item.feedbackMeasure: '无'}}</view>
					</view>
					<view class="item-info u-flex u-row-between">
						<text>完成进度：</text>
						<view v-if="item.feedbackProgress">
							<text v-if="item.feedbackProgress == 1">序时推进</text>
							<text v-if="item.feedbackProgress == 2">滞后时序</text>
							<text v-if="item.feedbackProgress == 3">已完成</text>
							<text v-if="item.feedbackProgress == 4">未完成</text>
						</view>
						<text v-else>无</text>
					</view>
					<view class="item-info u-flex u-row-between">
						<text>完成率：</text>
						<view>
							<text v-if="item.feedbackRate">{{item.feedbackRate}}%</text>
							<text v-else>无</text>
						</view>
					</view>
					<view class="item-info u-flex u-row-between">
						<text>反馈人：</text>
						<view class="">{{item.feedbackName?item.feedbackName: '无'}}</view>
					</view>
					<view class="item-info u-flex u-row-between">
						<text>反馈人电话：</text>
						<view class="">{{item.feedbackPhone?item.feedbackPhone: '无'}}</view>
					</view>
					<view class="item-info u-flex u-row-between">
						<text>审批人：</text>
						<view class="">{{item.auditorName?item.auditorName: '无'}}</view>
					</view>
					<view class="lh-mt-36" style="margin-left:24rpx">
						<LhFilelist :bizKey="item.id" bizType="dcSupTaskFeedback_file" />
					</view>
				
				</view>
				<view class="u-flex-col close" v-show="!item.isOpen">
					<text>{{item.feedbackContent ? item.feedbackContent : '无'}}</text>
					<text style="text-align: right;">{{item.feedbackName?item.feedbackName: '无'}}</text>
				</view>
			</template>	
		</view>

		<u-loadmore v-if="detailList.length >= pageSize" :status="status" :load-text="loadText" />
	</view>
</template>

<script>
	import LhFilelist from '@/components/lh-filelist/lh-filelist.vue';
	export default {
		data() {
			return {
				id: '',
				taskId: '',
				detailList: [],
				pageNo: 1,
				pageSize: 5,
				count: 0,
				status: 'loadmore',
				loadText: {
					loadmore: '加载更多',
					loading: '努力加载中',
					nomore: '我也是有底线的'
				},
			}
		},
		components: {
			LhFilelist
		},
		onLoad(param) {
			this.id = param.id;
			this.taskId = param.taskId;
			this.getInfoList(this.pageNo, this.pageSize);
		},
		methods: {
			getInfoList(no, size) {
				this.$u.api.taskAccount.taskInfoFeedbackListApp({
					actionId: this.id,
					taskId: this.taskId,
					pageNo: no,
					pageSize: size
				}).then(res => {
					if (res && res.list) {
						this.count = res.count;
						res.list.map(item => item.isOpen = false)
						if (this.detailList && this.detailList.length > 0) {
							this.detailList = [...this.detailList, ...res.list]
						} else {
							this.detailList = res.list;
						}
					}
				})
			}
		},
		onReachBottom() {
			if (this.detailList.length < this.count) {
				// 存在下一页
				this.pageNo += 1;
				this.status = 'loading';
				this.getInfoList(this.pageNo, this.pageSize)
			} else if (this.detailList.length >= this.count) {
				this.status = 'nomore';
			}
		},
	}
</script>

<style lang="scss">
	page {
		background-color: #f8f8f8;
	}

	.list-item {
		background-color: #fff;
		margin: 20rpx 20rpx 0;
		padding: 20rpx;
		border-radius: 4rpx;

		.feed-time-title {
			display: inline-block;
			color: #316ee6;
			margin-right: 20rpx;
			font-weight: bold;
		}

		.feed-time {
			color: #333;
		}

		.open,
		.close {
			margin-top: 20rpx;
		}
		.item-info {
			margin: 40rpx 0 0;
		}
	}
</style>